import React, { Component } from 'react'
import { connect } from 'react-redux'
import { WhiteSpace, List, WingBlank, Card, ImagePicker,InputItem } from 'antd-mobile'
import TitleNavBar from '@/common/components/displays/TitleNavBar'
import { Link } from 'react-router-dom'
import { createForm } from 'rc-form';

import '@/common/style/ui.less'
import '@/common/style/incentiveCom.less'

const Item = List.Item;
const Brief = Item.Brief;
class Talant extends Component {
    constructor(props){
        super(props)
        this.state = {
            titleData : {
                title: "Back",
                centerTitle: "Publish Incentive",
                rightTitle: ""
            },
            itemData : [
                {
                    id: 1,
                    name: "Country",
                    time: "",
                    extraData: "Country",
                    thumb: ""
                },
                {
                    id: 2,
                    name: "Date Range",
                    time: "",
                    extraData: "Date Range",
                    thumb: ""
                },
                {
                    id: 3,
                    name: "Key Word",
                    time: "",
                    extraData: "Incentive Key Word",
                    thumb: ""
                },
            ],
            files: [],
            multiple: false,
        }
    }
   
    onChange = (files, type, index) => {
        console.log(files, type, index);
        this.setState({
          files,
        });
    }
    render() {
        const { files } = this.state;
        const { getFieldProps } = this.props.form;
        return (
            <div className="incentive-container">
                <TitleNavBar titleData={this.state.titleData} Drawerstatus={false}/>
                <WhiteSpace/>
                <List className="my-list">
                {
                    this.state.itemData.map((item)=>
                    <InputItem
                    key={item.id}
                    placeholder={item.name}
                    labelNumber={10}
                    ref={el => this.labelFocusInst = el}>
                    <div>{item.extraData}</div>
                    </InputItem>)
                }
                </List>
                <div className="incentive-upload">
                    <WingBlank>
                        <p>Incentive Long Picture</p>
                        <ImagePicker
                            length = "3"
                            files={files}
                            onChange={this.onChange}
                            onImageClick={(index, fs) => console.log(index, fs)}
                            selectable={files.length < 7}
                            multiple={this.state.multiple}
                        />
                    </WingBlank>
                </div>
                <WhiteSpace/>
                <span className="confirm-btn">Publish</span>
            </div>
        )
    }
}

function mapStateToProps(state, ownProps) {
    return {

    }
}
const TextareaItemExampleWrapper = createForm()(Talant);
export default connect(mapStateToProps)(TextareaItemExampleWrapper);
